<template>
<!-- 故有属性 -->
<p><input type="text":placeholder="username"></p>
<p><input type="password":placeholder="password"></p>
<a :href="url">百度首页</a>
<div :class="{active:isActive}">绑定class属性</div>
<div :style="{color:textcolor,fontsize:fontsize+'px'}">对象语法绑定样式</div>
<div :style="[style1,style2]">数组绑定样式</div>
</template>
<script setup>
import {ref, Text} from"vue";
const username=ref("请求用户名");
const password="请输入密码";
const url="http://www.baidu.com"
const isActive=false;
const textcolor="blue";
const fontsize =30;
const style1={backgroundColor:"yellow",padding:"30px"}
const style2={color:"blue",border:"1px solid #add"}
setTimeout(()=>{
    username.value="请再次输入用户名"
},5000)
</script>

<style>
.active{
    color: crimson;
}

</style>